<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>新增手牌类型</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			function onSel(){
				$('#selectProduct').window('open');
			}
			
			function numFormat(value){
				var p = value.toString();
				p = p.substr(0, p.length - 2) + '.' + p.substr(p.length - 2, p.length);
				return p;
			}
			
			function clearForm(){
				$("#token_type_name").val('');
				$("#productNo").val('');
				$("#product_name").val('');
			}
			
			function submitForm(){
				var flag = "false";
				$.ajax({
					url:'checkTokenTypeName.do',
					data:{'tokenTypeName':$.trim($("#token_type_name").val())},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						flag = data.toString();
					}
				});
				
				if(flag == 'true'){
					$.messager.alert('操作结果','手牌类型已存在','warning');
					return false;
				}
				
				$("#addTokenTypeForm").submit();
			}
			
			$(function(){
				if('${result}' != null && '${result}' != ''){
					$.messager.alert('操作结果','${result}');
				}
			});
			
			function onReset(){
				$("#categoryId").combobox("setValue", '0');
				$("#subCategoryId").combobox("clear");
				$("#subCategoryId").combobox("loadData", getData());
				$("#subCategoryId").combobox("setValue", '0');
				$("#product_No").val('');
				$("#product_Name").val('');
			}
			
			function getSubCategory(category){
				if(category.value == 0){
					$("#subCategoryId").combobox("loadData", getData());
				}else{
					$("#subCategoryId").combobox("clear");
					$("#subCategoryId")
						.combobox("loadData", getDanimicData(category.value));
					$("#subCategoryId").combobox("setValue", '0');
				}
			}
			
			function getData(){
				var rows = [];
				rows.push({
					id: '0',
					product_sub_category_name: '---请选择---'
				});
				
				return rows;
			} 
			
			function getDanimicData(categoryId){
				var data = '';
				$.ajax({
					url:'../product/getSubCategory.do',
					data:{'categoryId':categoryId},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(datas){
						data = datas;
					}
				});
				
				if (!data.topRows){	            	
	            	data.topRows = [];
	            	data.topRows.push({
						id: '0',
						product_sub_category_name: '---请选择---'
					});
	            	for(var i=0; i<data.length; i++){
	            		var row = data[i];
	            		data.topRows.push(row);
	            	}
	            }  
 
				data = $.extend(true,[],data.topRows);
				return data;
			}
			
			function onQuery(){				
				$('#productTable').datagrid({
					url: '../product/queryProduct.do',
					pageNumber:1,				
					queryParams:{categoryId:$("#categoryId").combobox('getValue'),						
						subCategoryId:$("#subCategoryId").combobox('getValue'),
						productNo:$.trim($('#product_No').val()),
						productName:$.trim($('#product_Name').val())}
				});
			}
		</script>
	</head>
	
	<body>
		<div class="easyui-panel" title="新增 手牌类型" fit="true">
			<div style="padding:10px 0 10px 60px; text-align: right;">
				<form name="addTokenTypeForm" id="addTokenTypeForm" method="post" action="addTokenType">
					<table  style="text-align: center; border:1px;width:400px;">
						<tr>
							<td align="right" style="height:28px;">手牌类型名称：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" 
	    							name="token_type_name" id="token_type_name" required="true" />
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">绑定商品：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" name="product_name" id="product_name" data-options="required:true" />
	    						<input type="hidden" name="productNo" id="productNo" />
	    						&nbsp;&nbsp;
	    						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSel()">选择</a>
	    					</td>
						</tr>
					</table>
				</form>
			</div>
			
			<div style="margin-left:170px;padding:5px">
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    	</div>
		</div>
		
		<div id="selectProduct" class="easyui-window" title="绑定商品选择" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:700px;height:400px;">
			<table id="productTable" class="easyui-datagrid" style="width:700px;height:250px;"
	 			data-options="rownumbers:true,singleSelect:true,border:false,toolbar:'#tb',singleSelect:true,noheader:true,
	 					fit:true,fitColumns:true,pagination:true,url:'../product/queryProduct.do', onClickRow:function(rowIndex, rowData){
	 						$('#productNo').val(rowData.product_no);
	 						$('#product_name').val(rowData.product_name);
	 						$('#selectProduct').window('close');
	 					}">
				<thead>
					<tr>
						<th data-options="field:'product_no',width:80,align:'center'">商品编号</th>
						<th data-options="field:'product_name',width:120,align:'center'">商品名称</th>
						<th data-options="field:'product_sub_category_name',width:120,align:'center'">所属类别</th>
						<th data-options="field:'price',width:120,align:'center',formatter:function(value){
								return numFormat(value);
							}">产品单价</th>
						<th data-options="field:'vip_price',width:80, align:'center', formatter:function(value){
								return numFormat(value);
							}">会员价</th>
						<th data-options="field:'unit',width:100,align:'center'">单位</th>
						
					</tr>
				</thead>
			</table>
					
			<div id="tb" style="padding:5px;height:auto">
				<form id="queryProductForm" name="queryProductForm" action="queryProduct" method="post">
				<div>
					商品类别: 
					<select class="easyui-combobox" id="categoryId" name="categoryId" style="width:100px" data-options="panelHeight:'auto',onSelect:function(value){
		    			getSubCategory(value);
		    		}">
						<option value="0" >---请选择---</option>
						<c:forEach var="code" items="${categoryList}">
							<option value="${code.id}">${code.product_category_name}</option>	
						</c:forEach>
					</select>
					&nbsp;&nbsp;&nbsp;&nbsp;
					商品子类: 
					<select class="easyui-combobox" panelHeight="auto" id="subCategoryId" name="subCategoryId" style="width:100px"
						data-options="required:true, panelHeight:'auto', valueField:'id', textField:'product_sub_category_name'">
						<option value="0" >---请选择---</option>
					</select>
					&nbsp;&nbsp;&nbsp;&nbsp;
					商品编号: <input class="easyui-validatebox" name="product_No" id="product_No" style="width:80px">
					&nbsp;&nbsp;&nbsp;&nbsp;                          
					商品名称: <input class="easyui-validatebox" name="product_Name" id="product_Name" style="width:80px">
					&nbsp;&nbsp;
					<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
					<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
				</div>
				</form>
			
		</div>
	</body>
</html>